<!--
@BLINK-ALLOW:next*
@BLINK-ALLOW:prev*
@BLINK-ALLOW:className=*
@BLINK-ALLOW:isLineBreakingObject=true
-->
<style>
  /* Make the spans easier to see, for debugging */
  /* Each span also has a class name */
  span { background-color: rgba(0, 255, 0, .3); }
</style>
<div role="textbox" contenteditable="true">
  <p>Beginning</p>
  <ol>
    <li>A plain list item</li>
    <li>
      A list item<br>with a br (line break) inside it
    </li>
    <li><p role="presentation">A list item with an inner p role=presentation</p></li>
    <li>
      <p role="presentation">A list item with both a br and <br>an inner p role=presentation</p>
    </li>
    <li>
      <span class=a1>A list item with <span class=a2>inner <span class=a3>spans</span> </span>on each line</span><br><span clas=b1>and separated by a br</span>
    </li>
    <li>
      <p role="presentation"><span class=a1>A list item with a role presentation, and two inner spans, </span> <span class=a2>each separated by a space</span>
      </p>
    </li>
    <li>
      <p role="presentation"><span class=a1>A list item with a role presentation, and two inner spans, </span><br><span class=b1>each separated by a br</span>
      </p>
    </li>
    <li>
      <p role="presentation"><span class=a1>Hello</span><span class=a2><span class=a3 contenteditable="false"></span></span> <span class=b1>world this</span><span class=b2><span class=b3 contenteditable="false"> </span></span><span class=c1>is like docs markup without the weird presentational br</span>
      </p>
    </li>
    <li>
      <p role="presentation"><span class=a1>Hello</span><span class=a2><span class=a3 contenteditable="false"> <br role="presentation"></span></span><span class=b1>world this</span><span class=b2><span class=b3 contenteditable="false"> <br role="presentation"></span></span><span class=c1>is just like docs, and your kitchen sink</span>
      </p>
    </li>
  </ol>
  <p>The end</p>
</div>

